Internet Explorer Compatibility
This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML attributes and tags. Read this document if you are planning on deploying your Angular application on IE v8.0 or earlier.
To make your Angular application work on IE please make sure that:
You polyfill JSON.stringify if necessary (IE7 will need this). You can use JSON2 or JSON3 polyfills for this.
<!doctype html> <html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 8]> <script src="/path/to/json2.js"></script> <![endif]--> </head> <body> ... </body> </html>
add id="ng-app"
to the root element in conjunction with ng-app
attribute
<!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName"> ... </html>
you do not use custom element tags such as if you do use custom element tags, then you must take these steps to make IE happy:
The important parts are: IE has issues with element tag names which are not standard HTML tag names. These fall into two
categories, and each category has its own fix. If the tag name starts with If the tag has no If you are planning on styling the custom tag with CSS selectors, then it must be
pre-created using The good news is that these restrictions only apply to element tag names, and not to element
attribute names. So this requires no special handling in IE: Suppose you have HTML with unknown tag It should parse into the following DOM: The expected behavior is that the But this is not what IE does (if the above fixes are not included): In IE, the behavior is that the A self closing A text node with A corrupt self closing To make CSS selectors work with custom elements, the custom element name must be pre-created with
(use the attribute version
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>
xmlns:ng
- namespace - you need one namespace for each custom tag you are planning on
using.document.createElement(yourTagName)
- creation of custom tag names - Since this is an
issue only for older version of IE you need to load it conditionally. For each tag which does
not have namespace and which is not defined in HTML you need to pre-declare it to make IE
happy.Long Version
my:
prefix than it is considered an XML namespace and must
have corresponding namespace declaration on
:
but it is not a standard HTML tag, then it must be pre-created using
document.createElement('my-tag')
document.createElement('my-tag')
regardless of XML namespace.The Good News
.What happens if I fail to do this?
mytag
(this could also be my:tag
or my-tag
with same
result):
<html>
<body>
<mytag>some text</mytag>
</body>
</html>
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
BODY
element has a child element mytag
, which in turn has
the text some text
.
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
BODY
element has three children:
mytag
. Example of self closing tag is
. The trailing /
is optional,
but the
tag is not allowed to have any children, and browsers consider
as three siblings not a
some
text
with some text
as child.some text
. This should have been a child of mytag
above, not a sibling./mytag
. This is corrupt since element names are not allowed to have
the /
character. Furthermore this closing element should not be part of the DOM since it is
only used to delineate the structure of the DOM.CSS Styling of Custom Tag Names
document.createElement('my-tag')
regardless of XML namespace.
<html xmlns:ng="needed for ng: namespace">
<head>
<!--[if lte IE 8]>
<script>
// needed to make ng-include parse properly
document.createElement('ng-include');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<style>
ng\\:view {
display: block;
border: 1px solid red;
}
ng-include {
display: block;
border: 1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng-include></ng-include>
...
</body>
</html>